<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript基础语法 | 前端分享</title>
    <meta name="description" content="Vite & Vue powered static site generator.">
    <link rel="preload stylesheet" href="/docs/assets/style.ddc933c3.css" as="style">
    <link rel="modulepreload" href="/docs/assets/app.6e77c64e.js">
    <link rel="modulepreload" href="/docs/assets/frontend_js_JavaScript的基础语法.md.453edee2.lean.js">
    
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5211c0b1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5211c0b1 data-v-8c0a9870><div class="VPNavBar has-sidebar" data-v-8c0a9870 data-v-1bbed88e><div class="container" data-v-1bbed88e><div class="VPNavBarTitle has-sidebar" data-v-1bbed88e data-v-d5925166><a class="title" href="/docs/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/docs/logo.jpg" alt data-v-6db2186b><!--]--><!--[-->CY博客<!--]--><!--[--><!--]--></a></div><div class="content" data-v-1bbed88e><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1bbed88e data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/about/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->关于<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/frontend/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->前端<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1bbed88e data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-1bbed88e data-v-738bef5a data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/iyyo" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-1bbed88e data-v-e4361c82 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e4361c82><div class="item appearance" data-v-e4361c82><p class="label" data-v-e4361c82>Appearance</p><div class="appearance-action" data-v-e4361c82><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-e4361c82 data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-e4361c82><div class="item social-links" data-v-e4361c82><div class="VPSocialLinks social-links-list" data-v-e4361c82 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/iyyo" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-1bbed88e data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-5211c0b1 data-v-b6162a8b><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b6162a8b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b6162a8b><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b6162a8b>Menu</span></button><a class="top-link" href="#" data-v-b6162a8b> Return to top </a></div><aside class="VPSidebar" data-v-5211c0b1 data-v-a186aa16><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-a186aa16><span class="visually-hidden" id="sidebar-aria-label" data-v-a186aa16> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-a186aa16><section class="VPSidebarGroup collapsible collapsed" data-v-a186aa16 data-v-6e45c352><div class="title" role="button" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>HTML学习</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link" href="/docs/frontend/html/" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>html基础</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/html/%E6%A0%87%E7%AD%BE%E5%AD%A6%E4%B9%A0.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>html标签学习</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><div class="group" data-v-a186aa16><section class="VPSidebarGroup collapsible" data-v-a186aa16 data-v-6e45c352><div class="title" role="button" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>JavaScript教程</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link active" href="/docs/frontend/js/JavaScript%E7%9A%84%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>基础语法</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>分支结构</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/%E5%BE%AA%E7%8E%AF%E7%BB%93%E6%9E%84.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>循环结构</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/%E5%87%BD%E6%95%B0(%E4%B8%8A).html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>函数（上）</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/%E5%87%BD%E6%95%B0%EF%BC%88%E4%B8%8B%EF%BC%89.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>函数（下）</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/%E6%95%B0%E7%BB%84.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>数组</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%93%8D%E4%BD%9C.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>字符串的操作</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/Math%E5%92%8CDate.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>Math和Date</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/BOM%E5%92%8CDOM%EF%BC%88%E4%B8%8A%EF%BC%89.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>BOM和DOM（上）</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/docs/frontend/js/DOM%EF%BC%88%E4%B8%8B%EF%BC%89.html" style="padding-left:0px;" tabindex="-1" data-v-70e2cdfb data-v-3c355974><!--[--><span class="link-text" data-v-70e2cdfb>DOM（下）</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5211c0b1 data-v-296cfad2><div class="VPDoc has-sidebar has-aside" data-v-296cfad2 data-v-cfb513e0><div class="container" data-v-cfb513e0><div class="aside" data-v-cfb513e0><div class="aside-curtain" data-v-cfb513e0></div><div class="aside-container" data-v-cfb513e0><div class="aside-content" data-v-cfb513e0><div class="VPDocAside" data-v-cfb513e0 data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-afc4c1a1 data-v-2865c0b0><div class="content" data-v-2865c0b0><div class="outline-marker" data-v-2865c0b0></div><div class="outline-title" data-v-2865c0b0>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-2865c0b0><span class="visually-hidden" id="doc-outline-aria-label" data-v-2865c0b0> Table of Contents for current page </span><ul class="root" data-v-2865c0b0 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-cfb513e0><div class="content-container" data-v-cfb513e0><!--[--><!--]--><main class="main" data-v-cfb513e0><div style="position:relative;" class="vp-doc _docs_frontend_js_JavaScript%E7%9A%84%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95" data-v-cfb513e0><div><h1 id="javascript基础语法" tabindex="-1">JavaScript基础语法 <a class="header-anchor" href="#javascript基础语法" aria-hidden="true">#</a></h1><ul><li><code>HTML</code> ：标记语言</li><li><code>JavaScript</code> ：编程语言</li></ul><h2 id="序言" tabindex="-1">序言 <a class="header-anchor" href="#序言" aria-hidden="true">#</a></h2><h3 id="javascript发展历史-js" tabindex="-1">JavaScript发展历史（JS） <a class="header-anchor" href="#javascript发展历史-js" aria-hidden="true">#</a></h3><div class="language-txt line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。</span></span>
<span class="line"><span style="color:#A6ACCD;">	liveScript ==&gt; javaScript ==&gt; ECMAscript</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">2. 1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以&quot;一次编写，到处运	 行&quot;(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">3. 网景公司动了心，决定与Sun公司结成联盟</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">4. 34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多肽语言）</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">5.</span></span>
<span class="line"><span style="color:#A6ACCD;">	(1)借鉴C语言的基本语法</span></span>
<span class="line"><span style="color:#A6ACCD;">	(2)借鉴Java语言的数据类型和内存管理</span></span>
<span class="line"><span style="color:#A6ACCD;">	(3)借鉴Scheme语言，将函数提升到&quot;第一等公民&quot;(first class)的地位</span></span>
<span class="line"><span style="color:#A6ACCD;">	(4)借鉴Self语言，使用基于原型(prototype)的继承机制</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="javascript能干什么" tabindex="-1">JavaScript能干什么 <a class="header-anchor" href="#javascript能干什么" aria-hidden="true">#</a></h3><div class="language-txt line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. 常见的网页效果【表单验证，轮播图。。。】</span></span>
<span class="line"><span style="color:#A6ACCD;">2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】</span></span>
<span class="line"><span style="color:#A6ACCD;">3. 实现应用级别的程序【http://naotu.baidu.com】</span></span>
<span class="line"><span style="color:#A6ACCD;">4. 实现统计效果【http://echarts.baidu.com/examples/】</span></span>
<span class="line"><span style="color:#A6ACCD;">5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】</span></span>
<span class="line"><span style="color:#A6ACCD;">6. 在线学编程【https://codecombat.163.com/play/】</span></span>
<span class="line"><span style="color:#A6ACCD;">7. js可以实现人工智能【面部识别】</span></span>
<span class="line"><span style="color:#A6ACCD;">8. 。。。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="javascript的组成" tabindex="-1">JavaScript的组成 <a class="header-anchor" href="#javascript的组成" aria-hidden="true">#</a></h3><div class="language-txt line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型</span></span>
<span class="line"><span style="color:#A6ACCD;">2. BOM (Browser Object Model): 浏览器对象模型</span></span>
<span class="line"><span style="color:#A6ACCD;">  - 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等</span></span>
<span class="line"><span style="color:#A6ACCD;">3. DOM (Document Object Model): 文档对象模型</span></span>
<span class="line"><span style="color:#A6ACCD;">  - 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>总结： <strong>JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果</strong></p><h2 id="javascript代码的书写位置" tabindex="-1">JavaScript代码的书写位置 <a class="header-anchor" href="#javascript代码的书写位置" aria-hidden="true">#</a></h2><ul><li>和 <code>css</code> 一样，我们的 <code>js</code> 也可以有多种方式书写在页面上让其生效</li><li><code>js</code> 也有多种方式书写，分为 <strong>行内式</strong>， <strong>内嵌式</strong>，<strong>外链式</strong></li></ul><h3 id="行内式-js-代码-不推荐" tabindex="-1">行内式 JS 代码（不推荐） <a class="header-anchor" href="#行内式-js-代码-不推荐" aria-hidden="true">#</a></h3><ul><li>写在标签上的 js 代码需要依靠事件（行为）来触发</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 写在 a 标签的 href 属性上 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript:alert(&#39;我是一个弹出层&#39;);</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">点击一下试试</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 写在其他元素上 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">alert</span><span style="color:#C3E88D;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">我是一个弹出层</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">点一下试试看</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!--</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">	注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">--&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="内嵌式-js-代码" tabindex="-1">内嵌式 JS 代码 <a class="header-anchor" href="#内嵌式-js-代码" aria-hidden="true">#</a></h3><ul><li>内嵌式的 js 代码会在页面打开的时候直接触发</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text/javascript</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">我是一个弹出层</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!--</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">	注：script 标签可以放在 head 里面也可以放在 body 里面</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">--&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="外链式-js-代码-推荐" tabindex="-1">外链式 JS 代码（推荐） <a class="header-anchor" href="#外链式-js-代码-推荐" aria-hidden="true">#</a></h3><ul><li>外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发</li><li>新建一个 <code>.js</code> 后缀的文件，在文件内书写 <code>js</code> 代码，把写好的 <code>js</code> 文件引入 <code>html</code> 页面</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 我是 index.js 文件</span></span>
<span class="line"><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">我是一个弹出层</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 我是一个 html 文件 --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 一个页面可以引入多个 js 文件 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index1.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index2.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index3.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="js-中的注释" tabindex="-1">JS 中的注释 <a class="header-anchor" href="#js-中的注释" aria-hidden="true">#</a></h2><ul><li>学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的</li><li>写好一个注释，有利于我们以后阅读代码</li></ul><h3 id="单行注释" tabindex="-1">单行注释 <a class="header-anchor" href="#单行注释" aria-hidden="true">#</a></h3><ul><li>一般就是用来描述下面一行代码的作用</li><li>可以直接写两个 <code>/</code> ，也可以按 <code>ctrl + /</code></li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 我是一个单行注释</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 下面代码表示在浏览器里面出现一个弹出层</span></span>
<span class="line"><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">我是一个弹出层</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="多行注释" tabindex="-1">多行注释 <a class="header-anchor" href="#多行注释" aria-hidden="true">#</a></h3><ul><li>一般用来写一大段话，或者注释一段代码</li><li>可以直接写 <code>/**/</code> 然后在两个星号中间写注释 <ul><li>各个编辑器的快捷键不一样，<code>vscode</code> 是 <code>ctrl + shift + a</code></li></ul></li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/*</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">	我是一个多行注释</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">*/</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/*</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">	注释的代码不会执行</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">	alert(&#39;我是一个弹出层&#39;)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">	alert(&#39;我是一个弹出层&#39;)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">*/</span></span>
<span class="line"><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">我是一个弹出层</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="变量-重点" tabindex="-1">变量（重点） <a class="header-anchor" href="#变量-重点" aria-hidden="true">#</a></h2><ul><li>变量指的是在程序中保存数据的一个容器</li><li>变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据</li><li>也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他</li><li>语法： <code>var 变量名 = 值</code></li></ul><h3 id="定义变量及赋值" tabindex="-1">定义变量及赋值 <a class="header-anchor" href="#定义变量及赋值" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 定义一个变量</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> num</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 给一个变量赋值</span></span>
<span class="line"><span style="color:#A6ACCD;">num </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 定义一个变量的同时给其赋值</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> num2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>注意： <ol><li>一个变量名只能存储一个值</li><li>当再次给一个变量赋值的时候，前面一次的值就没有了</li><li>变量名称区分大小写（<code>JS</code> 严格区分大小写）</li></ol></li></ul><h3 id="变量的命名规则和命名规范" tabindex="-1">变量的命名规则和命名规范 <a class="header-anchor" href="#变量的命名规则和命名规范" aria-hidden="true">#</a></h3><ul><li><p>规则： 必须遵守的，不遵守就是错</p><blockquote><ol><li>一个变量名称可以由 <strong>数字</strong>、<strong>字母</strong>、<strong>英文下划线（_）</strong>、<strong>美元符号（$）</strong> 组成</li><li>严格区分大小写</li><li>不能由数字开头</li><li>不能是 <strong>保留字</strong> 或者 <strong>关键字</strong></li><li>不要出现空格</li></ol></blockquote></li><li><p>规范： 建议遵守的（开发者默认），不遵守不会报错</p><blockquote><ol><li>变量名尽量有意义（语义化）</li><li>遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写</li><li>不要使用中文</li></ol></blockquote></li></ul><h2 id="数据类型-重点" tabindex="-1">数据类型（重点） <a class="header-anchor" href="#数据类型-重点" aria-hidden="true">#</a></h2><ul><li>是指我们存储在内存中的数据的类型</li><li>我们通常分为两大类 <strong>基本数据类型</strong> 和 <strong>复杂数据类型</strong></li></ul><h3 id="基本数据类型" tabindex="-1">基本数据类型 <a class="header-anchor" href="#基本数据类型" aria-hidden="true">#</a></h3><ol><li>数值类型（number） <ul><li>一切数字都是数值类型（包括二进制，十进制，十六进制等）</li><li><code>NaN</code>（not a number），一个非数字</li></ul></li><li>字符串类型（string） <ul><li>被引号包裹的所有内容（可以是单引号也可以是双引号）</li></ul></li><li>布尔类型（boolean） <ul><li>只有两个（<code>true</code> 或者 <code>false</code>）</li></ul></li><li>null类型（null） <ul><li>只有一个，就是 <code>null</code>，表示空的意思</li></ul></li><li>undefined类型（undefined） <ul><li>只有一个，就是 <code>undefined</code>，表示没有值的意思</li></ul></li></ol><h3 id="复杂数据类型-暂时先不讲" tabindex="-1">复杂数据类型（暂时先不讲） <a class="header-anchor" href="#复杂数据类型-暂时先不讲" aria-hidden="true">#</a></h3><ol><li>对象类型（object）</li><li>函数类型（function）</li><li>。。。</li></ol><h2 id="判断数据类型" tabindex="-1">判断数据类型 <a class="header-anchor" href="#判断数据类型" aria-hidden="true">#</a></h2><ul><li>既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据</li><li>使用 <code>typeof</code> 关键字来进行判断</li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 第一种使用方式</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> n1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> n1)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 第二种使用方式</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> s1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">abcdefg</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;">(s1))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="判断一个变量是不是数字" tabindex="-1">判断一个变量是不是数字 <a class="header-anchor" href="#判断一个变量是不是数字" aria-hidden="true">#</a></h3><ul><li>可以使用 <code>isNaN</code> 这个方法来判断一个变量是不是数字</li><li><code>isNaN</code> ：<code>is not a number</code></li></ul><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 如果变量是一个数字</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> n1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">isNaN</span><span style="color:#A6ACCD;">(n1))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; false</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 如果变量不是一个数字</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> s1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Jack</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">isNaN</span><span style="color:#A6ACCD;">(s1))</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; true</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="数据类型转换" tabindex="-1">数据类型转换 <a class="header-anchor" href="#数据类型转换" aria-hidden="true">#</a></h2><ul><li>数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等</li></ul><h3 id="其他数据类型转成数值" tabindex="-1">其他数据类型转成数值 <a class="header-anchor" href="#其他数据类型转成数值" aria-hidden="true">#</a></h3><ol><li><p><code>Number(变量)</code></p><blockquote><p>可以把一个变量强制转换成数值类型</p><p>可以转换小数，会保留小数</p><p>可以转换布尔值</p><p>遇到不可转换的都会返回 <code>NaN</code></p></blockquote></li><li><p><code>parseInt(变量)</code></p><blockquote><p>从第一位开始检查，是数字就转换，知道一个不是数字的内容</p><p>开头就不是数字，那么直接返回 <code>NaN</code></p><p>不认识小数点，只能保留整数</p></blockquote></li><li><p><code>parseFloat(变量)</code></p><blockquote><p>从第一位开始检查，是数字就转换，知道一个不是数字的内容</p><p>开头就不是数字，那么直接返回 <code>NaN</code></p><p>认识一次小数点</p></blockquote></li><li><p>除了加法以外的数学运算</p><blockquote><p>运算符两边都是可运算数字才行</p><p>如果运算符任何一遍不是一个可运算数字，那么就会返回 <code>NaN</code></p><p>加法不可以用</p></blockquote></li></ol><h3 id="其他数据类型转成字符串" tabindex="-1">其他数据类型转成字符串 <a class="header-anchor" href="#其他数据类型转成字符串" aria-hidden="true">#</a></h3><ol><li><p><code>变量.toString()</code></p><blockquote><p>有一些数据类型不能使用 <code>toString()</code> 方法，比如 <code>undefined</code> 和 <code>null</code></p></blockquote></li><li><p><code>String(变量)</code></p><blockquote><p>所有数据类型都可以</p></blockquote></li><li><p>使用加法运算</p><blockquote><p>在 JS 里面，<code>+</code> 由两个含义</p><p>字符串拼接： 只要 <code>+</code> 任意一边是字符串，就会进行字符串拼接</p><p>加法运算：只有 <code>+</code> 两边都是数字的时候，才会进行数学运算</p></blockquote></li></ol><h3 id="其他数据类型转成布尔" tabindex="-1">其他数据类型转成布尔 <a class="header-anchor" href="#其他数据类型转成布尔" aria-hidden="true">#</a></h3><ol><li><p><code>Boolean(变量)</code></p><blockquote><p>在 js 中，只有 <code>&#39;&#39;</code>、<code>0</code>、<code>null</code>、<code>undefined</code>、<code>NaN</code>，这些是 <code>false</code></p><p>其余都是 <code>true</code></p></blockquote></li></ol><h2 id="运算符" tabindex="-1">运算符 <a class="header-anchor" href="#运算符" aria-hidden="true">#</a></h2><ul><li>就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在 <code>js</code> 里面还有很多的运算方式</li></ul><h3 id="数学运算符" tabindex="-1">数学运算符 <a class="header-anchor" href="#数学运算符" aria-hidden="true">#</a></h3><ol><li><p><code>+</code></p><blockquote><p>只有符号两边都是数字的时候才会进行加法运算</p><p>只要符号任意一边是字符串类型，就会进行字符串拼接</p></blockquote></li><li><p><code>-</code></p><blockquote><p>会执行减法运算</p><p>会自动把两边都转换成数字进行运算</p></blockquote></li><li><p><code>*</code></p><blockquote><p>会执行乘法运算</p><p>会自动把两边都转换成数字进行运算</p></blockquote></li><li><p><code>/</code></p><blockquote><p>会执行除法运算</p><p>会自动把两边都转换成数字进行运算</p></blockquote></li><li><p><code>%</code></p><blockquote><p>会执行取余运算</p><p>会自动把两边都转换成数字进行运算</p></blockquote></li></ol><h3 id="赋值运算符" tabindex="-1">赋值运算符 <a class="header-anchor" href="#赋值运算符" aria-hidden="true">#</a></h3><ol><li><p><code>=</code></p><blockquote><p>就是把 <code>=</code> 右边的赋值给等号左边的变量名</p><p><code>var num = 100</code></p><p>就是把 100 赋值给 num 变量</p><p>那么 num 变量的值就是 100</p></blockquote></li><li><p><code>+=</code></p><blockquote><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">+=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; 20</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>a += 10</code> 等价于 <code>a = a + 10</code></p></blockquote></li><li><p><code>-=</code></p><blockquote><p>var a = 10;</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">-=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; 0</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><code>a -= 10</code> 等价于 <code>a = a - 10</code></p></blockquote></li><li><p><code>*=</code></p><blockquote><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">*=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; 100</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>a *= 10</code> 等价于 <code>a = a * 10</code></p></blockquote></li><li><p><code>/+</code></p><blockquote><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">/=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; 1</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>a /= 10</code> 等价于 <code>a = a / 10</code></p></blockquote></li><li><p><code>%=</code></p><blockquote><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">%=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//=&gt; 0</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>a %= 10</code> 等价于 <code>a = a % 10</code></p></blockquote></li></ol><h3 id="比较运算符" tabindex="-1">比较运算符 <a class="header-anchor" href="#比较运算符" aria-hidden="true">#</a></h3><ol><li><p><code>==</code></p><ul><li>比较符号两边的值是否相等，不管数据类型 <blockquote><p><code>1 == &#39;1&#39;</code></p><p>两个的值是一样的，所以得到 <code>true</code></p></blockquote></li></ul></li><li><p><code>===</code></p><ul><li>比较符号两边的值和数据类型是否都相等 <blockquote><p><code>1 === &#39;1&#39;</code></p><p>两个值虽然一样，但是因为数据类型不一样，所以得到 <code>false</code></p></blockquote></li></ul></li><li><p><code>!=</code></p><ul><li>比较符号两边的值是否不等 <blockquote><p><code>1 != &#39;1&#39;</code></p><p>因为两边的值是相等的，所以比较他们不等的时候得到 <code>false</code></p></blockquote></li></ul></li><li><p><code>!==</code></p><ul><li>比较符号两边的数据类型和值是否不等 <blockquote><p><code>1 !== &#39;1&#39;</code></p><p>因为两边的数据类型确实不一样，所以得到 <code>true</code></p></blockquote></li></ul></li><li><p><code>&gt;=</code></p><ul><li>比较左边的值是否 <strong>大于或等于</strong> 右边的值 <blockquote><p><code>1 &gt;= 1</code> 结果是 <code>true</code></p><p><code>1 &gt;= 0</code> 结果是 <code>true</code></p><p><code>1 &gt;= 2</code> 结果是 <code>false</code></p></blockquote></li></ul></li><li><p><code>&lt;=</code></p><ul><li>比较左边的值是否 <strong>小于或等于</strong> 右边的值 <blockquote><p><code>1 &lt;= 2</code> 结果是 <code>true</code></p><p><code>1 &lt;= 1</code> 结果是 <code>true</code></p><p><code>1 &lt;= 0</code> 结果是 <code>false</code></p></blockquote></li></ul></li><li><p><code>&gt;</code></p><ul><li>比较左边的值是否 <strong>大于</strong> 右边的值 <blockquote><p><code>1 &gt; 0</code> 结果是 <code>true</code></p><p><code>1 &gt; 1</code> 结果是 <code>false</code></p><p><code>1 &gt; 2</code> 结果是 <code>false</code></p></blockquote></li></ul></li><li><p><code>&lt;</code></p><ul><li>比较左边的值是否 <strong>小于</strong> 右边的值 <blockquote><p><code>1 &lt; 2</code> 结果是 <code>true</code></p><p><code>1 &lt; 1</code> 结果是 <code>false</code></p><p><code>1 &lt; 0</code> 结果是 <code>false</code></p></blockquote></li></ul></li></ol><h3 id="逻辑运算符" tabindex="-1">逻辑运算符 <a class="header-anchor" href="#逻辑运算符" aria-hidden="true">#</a></h3><ol><li><p><code>&amp;&amp;</code></p><ul><li>进行 且 的运算 <blockquote><p>符号左边必须为 <code>true</code> 并且右边也是 <code>true</code>，才会返回 <code>true</code></p><p>只要有一边不是 <code>true</code>，那么就会返回 <code>false</code></p><p><code>true &amp;&amp; true</code> 结果是 <code>true</code></p><p><code>true &amp;&amp; false</code> 结果是 <code>false</code></p><p><code>false &amp;&amp; true</code> 结果是 <code>false</code></p><p><code>false &amp;&amp; false</code> 结果是 <code>false</code></p></blockquote></li></ul></li><li><p><code>||</code></p><ul><li>进行 或 的运算 <blockquote><p>符号的左边为 <code>true</code> 或者右边为 <code>true</code>，都会返回 <code>true</code></p><p>只有两边都是 <code>false</code> 的时候才会返回 <code>false</code></p><p><code>true || true</code> 结果是 <code>true</code></p><p><code>true || false</code> 结果是 <code>true</code></p><p><code>false || true</code> 结果是 <code>true</code></p><p><code>false || false</code> 结果是 <code>false</code></p></blockquote></li></ul></li><li><p><code>!</code></p><ul><li>进行 取反 运算 <blockquote><p>本身是 <code>true</code> 的，会变成 <code>false</code></p><p>本身是 <code>false</code> 的，会变成 <code>true</code></p><p><code>!true</code> 结果是 <code>false</code></p><p><code>!false</code> 结果是 <code>true</code></p></blockquote></li></ul></li></ol><h3 id="自增自减运算符-一元运算符" tabindex="-1">自增自减运算符（一元运算符） <a class="header-anchor" href="#自增自减运算符-一元运算符" aria-hidden="true">#</a></h3><ol><li><p><code>++</code></p><ul><li><p>进行自增运算</p></li><li><p>分成两种，<strong>前置++</strong> 和 <strong>后置++</strong></p></li><li><p>前置++，会先把值自动 +1，在返回</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">++</span><span style="color:#A6ACCD;">a)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 会返回 11，并且把 a 的值变成 11</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li><li><p>后置++，会先把值返回，在自动+1</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-palenight"><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a</span><span style="color:#89DDFF;">++</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 会返回 10，然后把 a 的值变成 11</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></li><li><p><code>--</code></p><ul><li>进行自减运算</li><li>分成两种，<strong>前置--</strong> 和 <strong>后置--</strong></li><li>和 <code>++</code> 运算符道理一样</li></ul></li></ol></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><!----><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><a class="pager-link prev" href="/docs/frontend/html/%E6%A0%87%E7%AD%BE%E5%AD%A6%E4%B9%A0.html" data-v-21f75714><span class="desc" data-v-21f75714>Previous page</span><span class="title" data-v-21f75714>html标签学习</span></a></div><div class="has-prev pager" data-v-21f75714><a class="pager-link next" href="/docs/frontend/js/%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>分支结构</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-5211c0b1 data-v-9f24cc86><div class="container" data-v-9f24cc86><p class="message" data-v-9f24cc86>Released under the MIT License.</p><p class="copyright" data-v-9f24cc86>Copyright © 2019-present Evan You</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"about_index.md\":\"fc0d8b3f\",\"index.md\":\"39c7eb93\",\"frontend_css_index.md\":\"c537d238\",\"test.md\":\"c56682cf\",\"frontend_index.md\":\"0ed5222c\",\"frontend_html_标签学习.md\":\"d5f469b0\",\"frontend_html_index.md\":\"842ad0f4\",\"frontend_js_循环结构.md\":\"7e1fc207\",\"frontend_js_javascript的基础语法.md\":\"453edee2\",\"frontend_js_字符串的操作.md\":\"4f2289d5\",\"frontend_js_函数（下）.md\":\"fd50e399\",\"frontend_js_函数(上).md\":\"d051f33f\",\"frontend_js_分支结构.md\":\"8d3c3640\",\"frontend_js_bom和dom（上）.md\":\"56d903af\",\"frontend_js_math和date.md\":\"0b68fbcc\",\"frontend_js_dom（下）.md\":\"a3afdbad\",\"frontend_js_数组.md\":\"d5cab654\"}")</script>
    <script type="module" async src="/docs/assets/app.6e77c64e.js"></script>
    
  </body>
</html>